<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 添加
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="通知标题" prop="noticeTitle">
                        <el-input v-model="form.noticeTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="通知类型" prop="noticeType">
                        <el-select v-model="form.noticeType" placeholder="请选择通知类型">
                            <el-option key="0" label="通知" value="0"></el-option>
                            <el-option key="1" label="公告" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="通知介绍" prop="summary">
                        <el-input type="textarea" rows="5" v-model="form.summary"></el-input>
                    </el-form-item>

                    <el-form-item label="内容" prop="contentText" v-model="form.content">
                        <mavon-editor @imgAdd="imgAdd" v-model="contentText" ref="md" style="min-height: 600px"
                                      @change="change"/>
                    </el-form-item>

                    <el-form-item>
                        <el-button class="editor-btn" type="primary" @click="submit('form')">提交</el-button>
                        <el-button @click="resetForm('form')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {mavonEditor} from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    import {add, uploadImg} from "../../api/notice";

    export default {
        name: 'addNotice',
        data: function () {
            return {
                contentText: '',
                form: {
                    noticeTitle: "",
                    noticeType: undefined,
                    summary: "",
                    content: ""
                },
                rules: {
                    noticeTitle: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                    ],
                    noticeType: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                    ],
                    summary: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                    ],
                    content: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                    ],
                }
            }
        },
        components: {
            mavonEditor
        },
        methods: {
            change(value, render) {
                this.form.content = render;
            },
            imgAdd(pos, $file) {
                let formData = new FormData();
                formData.append('image', $file);
                uploadImg(formData).then(res => {
                    console.log(res);
                    this.$refs.md.$img2Url(pos, res)
                })

            },
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        add(this.form).then(res => {
                            this.$message.success('提交成功！');
                            this.$refs[formName].resetFields();
                            this.contentText = "";
                            this.$router.push("/notice");
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.contentText = "";
            }
        }
    }
</script>
<style scoped>
    .editor-btn {
        margin-top: 20px;
    }
</style>